<template>
	<div class="cont">
		<div class="side">
			<div style="border-right:1px solid grey;padding-right: 10px;">
				<img src="./assets/avatar.jpg" alt="avatar" class="mid" width="128px" height="128px">
				<p class="center-align">哪里哪里</p>
				<p>TA的外脑：2399</p>
				<p>TA为外脑：9899</p>
			</div>
		</div>
		<div class="editor-signature">
			签名：<input type="text">
		</div>
		<div class="editor">
			昵称：<input type="text">
		</div>
		<div class="editor">
			邮箱：<input type="text">
		</div>
		<div class="editor">
			手机：<input type="text">
		</div>
	</div>
</template>

<script>
export default {
  name: 'sapp'
}
</script>

<style scoped>
	.center-align{
		text-align: center;
	}
	.mid{
		display: block;
		margin:0 auto;
	}
	.cont{
		width: 80%;
		margin:20px auto;
		display: grid;
		grid-template-columns: 140px auto;
		grid-template-rows: repeat(4,30px);
		grid-template-areas: 
		"side editor-signature"
		"side editor-nickname"
		"side editor-email"
		"side editor-mobile"; 
		grid-column-gap: 20px;
		background: #E5E4E2;
		min-height: 240px;
		padding: 10px;
	}
	.side{
		grid-area:side;
	}
	.editor-signature{
		grid-area:editor-signature;
	}
	.editor-nickname{
		grid-area:editor-nickname;
	}
	.editor-email{
		grid-area:editor-email;
	}
	.editor-mobile{
		grid-area:editor-mobile;
	}
	
</style>